<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>权限配置</title>
    <th:block th:include="~{common/common::commonHead}"/>
</head>
<style>
    body{
        background-color: #fff;
        height: auto;
    }
    .container-fluid{
        padding: 10px 8% 20px;
    }
    ul {
        padding-left: 20px;
    }
    li a{
        overflow: hidden;
        display: inline-block;
        padding:4px 0;
        width: 100%;
        vertical-align: middle;
    }
    li a:hover{
        background-color: #f5f5f5;
    }
    li .tree-checkbox{
        margin-top: 0;
    }
    li a>i{
        font-size:16px !important;
        float: left;
        padding: 2px 8px;
        cursor: pointer;
        width: 29px;
    }
    li.has-sub > a > .menu-icon::before {
        content: "\f196";
    }

    li.has-sub.open > a > .menu-icon::before {
        content: "\f147";
    }
    li.has-sub > ul {
        display: none;
    }
    li.has-sub.open > ul {
        display: block;
    }
</style>
<body data-width="620" data-height="420">
<div class="container-fluid">
    <div id="menuTree"></div>
    <form th:action="@{/auth/setRoleMenuPower}">
        <input type="hidden" id="roleId" name="roleId">
        <input type="hidden" id="menuPower" name="menuPower">
    </form>
</div>
</body>
</html>
<script>

    $(function () {
        var roleId = $.getUrlParams().roleId;
        $("#roleId").val(roleId);
        var selectedMenu = [];

        var createMenu = function (menu) {
            var $menu = $(TREE_TEMPLATE.join(""));
            var checkbox = $menu.find("input[type='checkbox']");
            if (menu.hasPower) {
                checkbox[0].checked = true;
                selectedMenu.push(menu.id);
            }
            var _subMenu = [];
            $menu.find(".menu-text").text(menu.menuName);
            // 定义事件
            $menu.find(".menu-icon").on("click", function () {
                $menu.toggleClass("open");
            });
            checkbox.on("change", function () {
                if (_menu.isChecked()) {
                    selectedMenu.push(menu.id);
                    _subMenu.forEach(function (sub) {
                        sub.check();
                    });
                } else {
                    selectedMenu.remove(menu.id);
                    _subMenu.forEach(function (sub) {
                        sub.unCheck();
                    });
                }
                $("#menuPower").val(selectedMenu.join(","));
            });
            if (menu.children) { // 有子项
                menu.children.forEach(function (subMenu) {
                    var sub = createMenu(subMenu);
                    _subMenu.push(sub);
                    $menu.children("ul").append(sub.getElement());
                });
                $menu.addClass("has-sub")
            } else { // 最后一层
                $menu.children("ul").remove();
            }
            var _menu = {
                getElement: function () {
                    return $menu;
                },
                check: function () {
                    checkbox[0].checked = true;
                    checkbox.trigger("change");
                },
                unCheck: function () {
                    checkbox[0].checked = false;
                    checkbox.trigger("change");
                },
                isChecked: function () {
                    return checkbox[0].checked;
                }
            };
            return _menu;
        };
        $.doAjax("auth/listMenu", {roleId: roleId}, function (menuList) {
            $.doAjax("auth/listMenuByRole", {roleId: roleId}, function (menuPower) {
                menuList.forEach(function (menu) {
                    menu.hasPower = false;
                    menuPower.forEach(function (power) {
                        if (menu.id === power.id) {
                            menu.hasPower = true;
                        }
                    });
                });
                var menuTree = $.listToTree(menuList, "menuId", "parentId");
                menuTree.forEach(function (menu) {
                    $("#menuTree").append(createMenu(menu).getElement());
                    $("#menuPower").val(selectedMenu.join(","));
                });
            });
        });
    });


    const TREE_TEMPLATE = [];
    TREE_TEMPLATE.push("<li class='open'>");
    TREE_TEMPLATE.push("  <a>");
    TREE_TEMPLATE.push("    <i class='menu-icon fa'></i>");
    TREE_TEMPLATE.push("    <input class='tree-checkbox' type='checkbox'>");
    TREE_TEMPLATE.push("    <span class='menu-text'></span>");
    TREE_TEMPLATE.push("  </a>");
    TREE_TEMPLATE.push("  <ul></ul>");
    TREE_TEMPLATE.push("</li>");

</script>